Skip to main content

​
Introduction

Create avatar videos with transparent backgrounds (alpha channel) for easy compositing over other content. Perfect for presentations, video editing, or web applications.

​
Key Features

Green Screen

Chroma key background for video editing

Alpha Channel

True transparency with WebM format

Easy Compositing

Overlay on any background

Professional Editing

Works with all major video editors
Best for: Overlaying avatars on presentations, adding to existing videos, website backgrounds, video editing projects, green screen replacements, and AR/VR applications.

​
Quick Start

EndpointPurposeDocumentation
POST /create_video_from_avatarCreate video with transparent backgroundAPI Reference
GET /avatar_video/{id}Check video statusAPI Reference

​
Key Parameters

ParameterTypeRequiredDescription
screen_styleinteger✅2 = Split screen (green screen), 3 = Picture in picture (WebM alpha)
avatar.avatar_idinteger✅Choose full-body avatar for best results
avatar.avatar_typeinteger✅0=Public, 1=Custom
voice.typestring✅“script” for text-to-speech
voice.voice_idstring✅Voice ID for text-to-speech
voice.scriptstring✅Text for avatar to speak
aspect_ratiostring✅portrait/landscape/square
Output Formats:
  • Split Screen (screen_style: 2): MP4 with green background - use chroma key in video editor
  • Picture in Picture (screen_style: 3): WebM with alpha channel - true transparency, no keying needed

​
Code Examples

​
Scenario 1: Green Screen (Split Screen)

Create video with green screen for video editing: 
curl --request POST \
  --url 'https://api.jogg.ai/v2/create_video_from_avatar' \
  --header 'x-api-key: YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "avatar": {
      "avatar_id": 81,
      "avatar_type": 0
    },
    "voice": {
      "type": "script",
      "voice_id": "en-US-ChristopherNeural",
      "script": "Welcome! This avatar has a transparent background."
    },
    "aspect_ratio": "portrait",
    "screen_style": 2,
    "caption": false
  }'
Response: 
{
  "code": 0,
  "msg": "Success",
  "data": {
    "video_id": "video_123456"
  }
}
Use for:
  • Video editing software (Premiere, Final Cut, DaVinci)
  • Broadcast applications
  • Maximum compatibility
How to use:
  1. Import video to editor
  2. Apply chroma key effect
  3. Remove green color
  4. Composite over background

​
Scenario 2: WebM with Alpha Channel

Create video with true transparency: 
curl --request POST \
  --url 'https://api.jogg.ai/v2/create_video_from_avatar' \
  --header 'x-api-key: YOUR_API_KEY' \
  --header 'Content-Type: application/json' \
  --data '{
    "avatar": {
      "avatar_id": 81,
      "avatar_type": 0
    },
    "voice": {
      "type": "script",
      "voice_id": "en-US-ChristopherNeural",
      "script": "Your script here"
    },
    "aspect_ratio": "portrait",
    "screen_style": 3
  }'
Response: 
{
  "code": 0,
  "msg": "Success",
  "data": {
    "video_id": "video_123456"
  }
}
Use for:
  • Web applications
  • HTML5 video players
  • Direct compositing without keying
How to use: 
<video autoplay loop muted playsinline>
  <source src="avatar-transparent.webm" type="video/webm">
</video>
Set screen_style: 2 for green screen (video editing) or screen_style: 3 for WebM with alpha channel (web applications).

​
Use Case Examples

Composite avatars into existing videos:
  • Use green screen format (screen_style: 2)
  • Import to Premiere, Final Cut, or DaVinci
  • Apply chroma key effect
  • Overlay on any background
Add avatars to websites:
  • Use WebM with alpha (screen_style: 3)
  • Embed in HTML5 video player
  • Overlay on dynamic backgrounds
  • No keying required
Add avatars to slides:
  • Create transparent avatar videos
  • Overlay on presentation slides
  • Professional appearance
  • Easy to update
Use avatars in immersive experiences:
  • WebM with alpha channel
  • True transparency
  • Composite in 3D environments
  • Realistic integration

​
Tips for Best Results

Quality Tips:
  • Use full-body avatars for best results
  • Test composite in target environment
  • For web, use WebM with alpha (screen_style: 3)
  • For video editing, use green screen (screen_style: 2)
  • Avoid captions if compositing over text-heavy backgrounds
  • Green screen works best with even lighting
  • WebM alpha has cleaner edges

Create Avatar Videos

Main avatar video guide

Get Avatar Video

Check video generation status

API Reference

Complete API documentation

Get Avatars

Browse available avatars